<template>
  <el-form-item
    v-if="enumType === 'FILE'"
    class="com-enum-path-input"
    label="页面路径" prop="path"
  >
    <el-input
      :value="value"
      @input="inputChange"
      placeholder="必须以【/:id】结尾"
    >
      <el-select
        v-if="template"
        class="template-option"
        v-model="templatePageType"
        slot="append"
        @change="optionChange"
        placeholder="请选择"
      >
        <el-option label="自定义" value="CUSTOM" key="CUSTOM"></el-option>
        <el-option v-for="item in options" :label="item.title" :value="item.path" :key="item.path"></el-option>
      </el-select>
    </el-input>
  </el-form-item>
</template>

<script lang="ts">
  import { Vue, Component, Model, Prop, Watch } from 'vue-property-decorator'
  import Templates from '@/project/index/router/templateRouter'

  @Component({
    name: 'ComEnumPathInput',
  })
  export default class ComEnumPathInput extends Vue {

    @Model('change', { type: String }) value!: string
    @Prop({ type: Boolean, default: false }) template!: boolean
    @Prop({ type: String, default: 'FILE' }) enumType!: string
    templatePageType = 'CUSTOM'
    options = Templates

    @Watch('enumType')
    enumTypeChange() {
      this.templatePageType = 'CUSTOM'
    }

    inputChange(text: string) {
      this.$emit('change', text)
    }

    clearOption() {
      this.templatePageType = 'CUSTOM'
    }

    optionChange(val: string) {
      this.$emit('change', val === 'CUSTOM' ? '' : val)
    }
  }
</script>

<style lang="scss">
.com-enum-path-input {
  .el-input-group__append {
    width: 100px;
  }
}
</style>
